<template>
  <div class="content">
    <el-card>
      <NavBar>
        <el-form-item :label="t('工作流名称')">
          <el-input v-model.trim="search.supplierName"
                    :placeholder="t('请输入')"
                    clearable
                    suffix-icon="User"
                    @keyup.enter="goSearch" />
        </el-form-item>
        <el-button v-debounce:click="goSearch" icon="Search" type="">{{ t("搜索") }}</el-button>
        <el-button icon="RefreshRight" @click="clearSearch">{{ t("重置") }}</el-button>
      </NavBar>
    </el-card>
    <div class="br-height"></div>
    <el-card>
      <div class="card-header">
        <Permission permission="ADD">
          <el-button icon="Plus" type="primary" @click="add">{{ t("创建流程") }}</el-button>
        </Permission>
      </div>
      <div class="br-height"></div>
      <el-table v-loading="loading" :data="tableData" border style="width: 100%; min-height: 30rem"
                @selection-change="handleSelectionChange">
        <el-table-column :label="t('名称')" align="left" min-width="150" prop="displayName" />
        <el-table-column :label="t('版本')" align="left" prop="version" width="100" />
        <el-table-column :label="t('备注')" align="left" min-width="130" prop="description" />
        <el-table-column :label="t('创建时间')" align="left" width="180">
          <template #default="scope">
            {{ checkTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('操作')" align="left" fixed="right" width="110">
          <template #default="scope">
            <div class="flex items-center">
              <el-link link type="primary" @click="design(scope.row)">{{ t("设计") }}</el-link>
              <el-link link type="danger" @click="deleteMsg(del,scope.row.definitionId)">{{ t("删除") }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="card-footer">
          <div>共&nbsp;{{ totalCount }}&nbsp;{{ t("条数据") }}</div>
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40]"
                         :total="totalCount"
                         layout="prev, pager, next,sizes, jumper" size="small" @size-change="handleSizeChange"
                         @current-change="init" />
        </div>
      </template>
    </el-card>
    <AddWorkFlow v-model="addVisible" @init="init"></AddWorkFlow>
  </div>
</template>
<script lang="ts" setup>
import AddWorkFlow from "@/views/SystemSetting/wflow/components/AddWorkFlow.vue";
import { Permission } from "@/components/Permission/index";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { checkTime, deleteMsg } from "@/global/fun";
import NavBar from "@/components/NavBar/Index.vue";
import { useI18n } from "@/hooks/web/useI18n";
import { delWorkFlow, workflowDefinitions } from "@/api/WorkFlow";
import { useRouter } from "vue-router";

const { t } = useI18n("lims");

type searchInter = | {} | {
  username: string | undefined
  account: string | undefined
}

const tableData = ref([]);
const totalCount = ref<number>(0);
const pageSize = ref<number>(20);
const currentPage = ref<number>(1);
const search = ref<searchInter>({});
const loading = ref<boolean>(false);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  init();
};
const init = async (page = null): Promise<void> => {
  currentPage.value = page ? page : currentPage.value;
  loading.value = true;
  const res = await workflowDefinitions({
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    version: "LatestOrPublished",//最新的
    ...search.value
  });
  loading.value = false;
  console.log(res);
  if (res.status == 200) {
    tableData.value = res.data.items;
    totalCount.value = res.data.totalCount;
  }
};
const goSearch = async (): Promise<void> => {
  currentPage.value = 1;
  await init();
};
const clearSearch = () => {
  search.value = {};
  currentPage.value = 1;
  init();
};

const editRow = ref<object>({});

const del = async (id): Promise<void> => {
  const res = await delWorkFlow(id);
  if (res.status == 202) {
    ElMessage({
      message: "删除成功",
      type: "success"
    });
    init();
  } else {
    ElMessage.error("删除失败");
  }
};

const addVisible = ref<boolean>(false);
const add = async (): Promise<void> => {
  addVisible.value = true;
};

const router = useRouter();
const design = (row: any) => {
  router.push({
    name: "WorkFlowFrom",
    query: {
      id: row.definitionId
    }
  });
};
init();
</script>
<style lang="less" scoped>
.el-link {
  margin-right: 8px;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}

.content {
  padding: 0.5rem;

  .card-header {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
  }
}

.hiddenFont {
  width: 5rem;
  overflow: hidden;
  white-space: nowrap !important; /* 禁止换行 */
  text-overflow: ellipsis !important; /* 溢出部分以省略号表示 */
  margin: 0 auto;
}
</style>
